<template>
  <div class="box">
    <div class="header">
      <i data-v-edc0c6d0="" class="van-badge__wrapper van-icon van-icon-arrow-left"><!----><!----><!----></i>
      <h3>描述病情</h3>
    </div>
    <div class="header_two">
      <div v-for="(item, ind) in tabBin" :key="ind">
        <div>
          <span style="font-size: 35px">{{ item }}</span>
        </div>
      </div>
    </div>
    <div class="content_socket">
      <div class="socket">
        <div class="headerFu">
          <div class="FuWu">
            <img src="../../img/shield.png" alt="" />
            <p style="font-size: 40px; font-weight: bold">服务保障</p>
          </div>
          <div class="lis">
            <ul class="uls">
              <li style="list-style: disc">专业医生</li>
              <li style="list-style: disc">实名认证</li>
              <li style="list-style: disc">多轮沟通</li>
              <li style="list-style: disc">超时退款</li>
            </ul>
          </div>
        </div>
        <div class="xieyi">
          <p style="color: #999">
            请您仔细阅读<span style="color: blue">《风险告知及患者知情同意书》</span
            >,如非复诊,我们仅提供医疗咨询服务。继续操作表示您知悉并同意上述告知内容。
          </p>
        </div>
        <div class="chat">
          <div class="message-item" v-for="(item, ind) in messageList" :key="ind">
            <div class="flex-left" v-if="item.type === 'server'">
              <div class="avatar">
                <img src="../../img/aidoctor.png" width="100%" height="100%" alt="" />
              </div>
              <div class="message-content">
                {{ item.content }}
              </div>
            </div>
            <div class="flex-right" v-else>
              <div class="message-content">
                <div v-if="item.content.startsWith('https')">
                  <img :src="item.content" style="width: 300px; height: 190px" />
                </div>
                <div v-else>
                  {{ item.content }}
                </div>
              </div>
              <div class="avatar">
                <img :src="avatar" width="100%" height="100%" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="footer" v-if="showFlag == 1">
          <textarea
            v-model="yourMessage"
            placeholder="请用5-500字描述具体症状、患病时长、用药情况、需要医生提供哪些帮助等,以便医生更好帮助您解决问题"
          ></textarea>
          <button @click="sendMessage">提交</button>
        </div>
        <div class="fileImage" v-else-if="showFlag == 2">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 50px;
              line-height: 30px;
            "
          >
            <div style="display: flex">
              <h3 style="font-size: 32px">上传图片</h3>
              <span style="color: #999; padding-left: 5px; padding-top: 2px">(选填)</span>
            </div>
            <p class="Tiao">跳过</p>
          </div>
          <p style="color: #999; letter-spacing: 3px">检查单/历史病例/患处照片(最多5张)</p>
          <div style="margin-top: 15px; margin-bottom: 10px">
            <van-uploader v-model="fileList" multiple :after-read="afterUpload" />
          </div>
          <button class="FileBtn" @click="SendSubmit">确定</button>
        </div>
        <div class="Uploads" v-else-if="showFlag == 3">
          <div style="display: flex; align-items: center; justify-content: space-between">
            <h3>选择档案</h3>
            <div style="color: #669afe; font-size: 30px" @click="handlePush">+新建档案</div>
          </div>
          <div class="archiveList">
            <div
              v-for="item in archiveList"
              :key="item.id"
              :class="activeIndex === item.id ? 'active' : ''"
              @click="handleSub(item)"
            >
              <div>
                <p style="text-indent: 14px; padding-top: 10px; font-size: 26px">
                  {{ item.name
                  }}<span style="font-size: 20px; padding-left: 6px; color: #9d9d9d"
                    >({{ item.relationship }})</span
                  >
                </p>
                <div class="myContent">
                  <span>25</span><span>{{ item.sex }}</span>
                  <span>{{ item.tel.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="ZiXun" v-else>
          <div class="tops">
            <p>根据您的描述</p>
            <div class="topFooters">
              <div>
                为您分针到<span style="color: #ff5702; font-weight: 600">【{{ KeShi }}】</span>
              </div>
              <div class="KeImage" @click="showBottomss">
                <img src="../../assets/socketImage/loads.png" alt="" />
                <span>重选科室</span>
              </div>
            </div>
          </div>
          <div class="TuiJian">
            <div class="TuiTop">
              <h3>为你推荐</h3>
              <p>智能匹配医生·未接诊可退款</p>
            </div>
            <div class="TuiContent">
              <dl style="margin-top: 25px">
                <dt>
                  <img
                    src="../../assets/socketImage/zixun2.png"
                    width="95px"
                    height="95px"
                    alt=""
                  />
                </dt>
                <dd>
                  <div style="display: flex; align-items: center">
                    <div style="display: flex; align-items: center">
                      <h3>极速图文问诊</h3>
                      <p
                        style="
                          margin-left: 15px;
                          width: 75px;
                          height: 45px;
                          text-align: center;
                          border-radius: 25px;
                          color: #e96b21;
                          line-height: 45px;
                          border: 1px solid #e96b21;
                        "
                      >
                        推荐
                      </p>
                      <span
                        style="text-decoration: line-through; color: #9d9d9d; margin-left: 100px"
                        >￥9.9</span
                      >
                      <span
                        style="
                          font-size: 42px;
                          margin-left: 15px;
                          font-weight: bold;
                          color: #f46809;
                        "
                        @click="handlePaySix"
                        ><s style="font-size: 19px">￥</s>{{ SixNine }}</span
                      >
                      <img
                        src="../../assets/socketImage/right1.png"
                        width="20px"
                        height="20px"
                        style="margin-left: 20px"
                        alt=""
                      />
                    </div>
                  </div>
                  <div>
                    <p style="color: #9f9f9f">平均3分钟接诊，交流时长: 30条消息/30分钟</p>
                  </div>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img
                    src="../../assets/socketImage/zixun3.png"
                    width="95px"
                    height="95px"
                    alt=""
                  />
                </dt>
                <dd>
                  <div style="display: flex; align-items: center">
                    <div style="display: flex; align-items: center">
                      <h3>极速电话问诊</h3>
                      <span
                        style="text-decoration: line-through; color: #9d9d9d; margin-left: 179px"
                        >￥59.9</span
                      >
                      <span
                        style="
                          font-size: 42px;
                          margin-left: 15px;
                          font-weight: bold;
                          color: #f46809;
                        "
                        @click="handlePayThree"
                        ><s style="font-size: 19px">￥</s>{{ thirty }}</span
                      >
                      <img
                        src="../../assets/socketImage/right1.png"
                        width="20px"
                        height="20px"
                        style="margin-left: 20px"
                        alt=""
                      />
                    </div>
                  </div>
                  <div>
                    <p style="color: #9f9f9f">平均10分钟响应，通话时长：10分钟</p>
                  </div>
                </dd>
              </dl>
              <dl>
                <dt>
                  <img
                    src="../../assets/socketImage/zixun1.png"
                    width="95px"
                    height="95px"
                    alt=""
                  />
                </dt>
                <dd>
                  <div style="display: flex; align-items: center">
                    <div style="display: flex; align-items: center">
                      <h3>极速视频问诊</h3>
                      <span
                        style="text-decoration: line-through; color: #9d9d9d; margin-left: 179px"
                        >￥99.9</span
                      >
                      <span
                        style="
                          font-size: 42px;
                          margin-left: 15px;
                          font-weight: bold;
                          color: #f46809;
                        "
                        @click="handlePayFive"
                        ><s style="font-size: 19px">￥</s>{{ fifty }}</span
                      >
                      <img
                        src=""
                        width="20px"
                        height="20px"
                        style="margin-left: 20px"
                        alt=""
                      />
                    </div>
                  </div>
                  <div>
                    <p style="color: #9f9f9f">平均10分钟响应，通话时长：15分钟</p>
                  </div>
                </dd>
              </dl>
            </div>
          </div>
          <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%' }">
            <div class="popContent">
              <div class="top">
                <span>取消</span>
                <p>重选科室</p>
                <span @click="handleSubmit" style="color: #669afe">确定</span>
              </div>
              <div class="contentPop">
                <div class="search-ke">
                  <div class="left">
                    <ul>
                      <li
                        v-for="(item, index) in listData"
                        :key="index"
                        :class="active === index ? 'active' : ''"
                        @click="onclick(index)"
                      >
                        {{ item.all }}
                      </li>
                    </ul>
                  </div>
                  <div class="right">
                    <ul>
                      <li
                        v-for="(item, index) in listData"
                        :key="index"
                        :class="active === index ? 'actives' : ''"
                        @click="onclicks(item, index)"
                      >
                        {{ item.class }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </van-popup>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  height: 60px;
  justify-content: space-between;
  display: flex;
  align-items: center;
  h3 {
    font-size: 35px;
    margin-right: 40%;
  }
}
.header_two {
  height: 70px;
  justify-content: space-around;
  display: flex;
  align-items: center;
  overflow: hidden;
  div {
    span::after {
      content: '>';
      position: relative;
      left: 57%;
      color: black;
    }
  }
}
.content_socket {
  display: flex;
  overflow: auto;
  flex-direction: column;
  width: 100%;
  height: 1204px;
  background-color: #eee;
  .socket {
    flex: 1;
    background-color: #eee;
  }
  .headerFu {
    width: 90%;
    height: 100px;
    margin: 20px auto;
    border-radius: 15px;
    background-color: #fff;
  }
  .FuWu {
    align-items: center;
    height: 45px;
    display: flex;
    p {
      font-size: 35px;
    }
    img {
      width: 35px;
      height: 35px;
      margin: 5px 10px;
    }
  }
  .uls {
    display: flex;
    align-items: center;
    list-style-type: disc;
    li {
      margin-top: 5px;
      color: #999;
      margin-left: 40px;
    }
  }
}
.xieyi {
  width: 90%;
  height: 120px;
  border-radius: 15px;
  margin: 0 auto;
  padding: 10px 10px;
  background-color: #d0cfcf;
}
.chat {
  width: 90%;
  height: 670px;
  margin: 0 auto;
  margin-top: 30px;
}
.message-item {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 10px;
}
.flex-left {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: -60px;
  margin-bottom: 25px;
}
.avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  margin-right: 12px;
  background-color: #fafafa;
}
.message-content {
  min-height: 60px;
  max-width: 440px;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  letter-spacing: 3px;
  font-size: 27px;
}
.flex-right {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
  margin-right: -60px;
  overflow-x: hidden;
}
.footer {
  width: 750px;
  height: 247px;
  display: flex;
  align-items: center;
  background-color: #fff;
  textarea {
    padding: 5px 10px;
    outline: none;
    cursor: pointer;
    font-size: 26px;
    font-family: 'Times New Roman', serif;
    letter-spacing: 3px;
    height: 70%;
    flex: 1;
    background-color: #eee;
    border-radius: 20px;
    margin: 0 20px;
  }
  button {
    font-size: 25px;
    border: none;
    color: white;
    border-radius: 20px;
    background-color: #b5cbf8;
    padding: 20px 30px;
    margin-right: 20px;
  }
}
.fileImage {
  background-color: #fff;
  width: 750px;
  height: 347px;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  position: relative;
  top: 0%;
}
.Tiao {
  position: absolute;
  right: 5%;
  top: 5%;
}
.FileBtn {
  width: 90%;
  border-radius: 25px;
  height: 85px;
  margin: auto;
  border: none;
  color: white;
  font-size: 30px;
  background-color: #b5cbf8;
  line-height: 50px;
}
.Uploads {
  background-color: #fff;
  width: 100%;
  height: 207px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  padding: 12px 20px;
  position: relative;
  top: 22%;
}
.archiveList {
  width: 100%;
  height: 120px;
  padding: 19px 0px 0px 5px;
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  &.active {
    background-color: #b5cbf8;
  }
  > div {
    width: 45%;
    margin-left: 15px;
    height: 100px;
    background-color: #efefef;
  }
}
.myContent {
  padding-left: 14px;
  display: flex;
  align-items: center;
  > span {
    font-size: 25px;
    color: #737373;
    line-height: 55px;
    padding-right: 13px;
  }
}
.ZiXun {
  width: 100%;
  height: 600px;
  position: relative;
  top: 20%;
  background-color: #eee;
}
.tops {
  width: 94%;
  padding: 10px 20px;
  border-radius: 15px;
  height: 85px;
  margin: 10px auto;
  background-color: #ffffff;
  display: flex;
  color: #888888;
  flex-direction: column;
  font-size: 26px;
  .topFooters {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .KeImage {
    display: flex;
    align-items: center;
    img {
      margin-right: 10px;
      width: 30px;
      height: 30px;
    }
  }
}
.TuiJian {
  width: 94%;
  height: 510px;
  border-radius: 15px;
  margin: 10px auto;
  background-color: #fff;
  .TuiTop {
    width: 100%;
    height: 65px;
    display: flex;
    border-radius: 15px;
    align-items: center;
    background-image: linear-gradient(to bottom, #eaf5ff, #f8fcff);
    h3 {
      margin-left: 20px;
      margin-right: 20px;
    }
  }
}
.TuiContent {
  h3 {
    font-family: 'Helvetica Neue';
  }
  dl {
    display: flex;
    align-items: center;
    width: 95%;
    height: 110px;
    margin: 30px auto;
    dd {
      padding-left: 10px;
      line-height: 52px;
    }
  }
}
.popContent {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 25px;
  .top {
    width: 97%;
    margin: auto;
    position: sticky;
    left: 0;
    top: 0;
    height: 70px;
    line-height: 70px;
    background-color: #fff;
    justify-content: space-between;
    display: flex;
    align-items: center;
    z-index: 999;
    p {
      font-size: 28px;
    }
    span {
      font-size: 26px;
      padding: 0 15px;
    }
  }
  .contentPop {
    flex: 1;
    height: 100%;
    background-color: #eee;
    .search-ke {
      width: 100%;
      height: 100%;
      display: flex;
      .left {
        width: 30%;
        height: 100%;
        background: #f6f6f6;
        overflow-y: auto;
        ul {
          li {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
          }
        }
        .active {
          background: #ffffff;
          color: #386eff;
        }
      }
      .right {
        height: 500px;
        flex: 1;
        overflow-y: auto;
        ul {
          li {
            width: 100%;
            height: 80px;
            line-height: 80px;
            text-align: center;
          }
        }
        .actives {
          background: #3b68c3;
          color: #fff;
        }
      }
    }
  }
}
</style>

<script setup lang="ts"> 
import axios from 'axios'
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const tabBin = ref(['描述病情', '匹配医生', '开始咨询'])
const userInfo = ref({
  userId: '',
})
const route = useRoute()
const router = useRouter()
const archiveList = ref<any>([])
const showBottom = ref(false)
const listData = ref<any>([])
const active = ref(null)
const showFlag = ref(1)
const KeShi = ref('全科')

const SixNine = ref('6.9')
const thirty = ref('30')
const fifty = ref('50')
const avatar= ref(localStorage.getItem('avatars'))
console.log( );

const handlePaySix = () => {
  //6.9支付
  router.push({
    path: '/pay',
    query: {
      money: SixNine.value,
      name: '极速图文问诊',
    },
  })
}

const handlePayThree = () => {
  //6.9支付
  router.push({
    path: '/pay',
    query: {
      money: thirty.value,
      name: '极速电话问诊',
    },
  })
}

const handlePayFive = () => {
  //6.9支付
  router.push({
    path: '/pay',
    query: {
      money: fifty.value,
      name: '极速视频问诊',
    },
  })
}

const showBottomss = () => {
  showBottom.value = true
}

const onclick = (index: any) => {
  active.value = index
}

const onclicks = (item: any, index: any) => {
  active.value = index
  KeShi.value = item.class
  console.log(KeShi.value)
}

const handleSubmit = () => {
  console.log(KeShi.value)
  showBottom.value = false
}

const getList = async () => {
  await axios.get('/api/doctorList').then((res) => {
    console.log(res)
    listData.value = res.data.data
  })
}

getList()
//接收新建档案的值

const handlePush = () => {
  router.push({ path: '/newXin' })
}

const getArchive = async () => {
  await axios.get('/api/archive').then((res) => {
    console.log(res)
    archiveList.value = res.data.data
  })
}

getArchive()
const fileList = ref<any>([])
const fileImageList = ref<any>([])

const activeIndex = ref(null)

const messageList = ref([
  {
    type: 'server',
    content: '您好,我是您的医生助手',
  },
  {
    type: 'server',
    content: '请在下方输入框详细描述病情,以便医生准确了解您的情况,快速接诊',
  },
])

const handleSub = (item: any) => {
  activeIndex.value = item.id
  console.log(activeIndex.value)
  console.log(item.id)
  messageList.value.push({
    type: 'message',
    content: `${item.name} ${item.sex} ${item.age}`,
  })
  showFlag.value = 4
}

console.log(messageList.value)

const formData = new FormData()
const afterUpload = async (file: any) => {
  //console.log(file.file)
  formData.append('file', file.file)
  console.log(formData)

  await axios
    .post('/api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
    .then((res) => {
      console.log(res)
      fileImageList.value.push(res.data.result)
    })
  console.log(fileImageList.value)

  //console.log(file.content)

  //console.log('base64路径', file.content)
  //console.log(fileImageList.value)
}

console.log(fileImageList.value)
const yourMessage = ref('')

let ws = null

// 第一步发送消息
const sendMessage = () => {
  messageList.value.push({
    type: 'message',
    content: yourMessage.value,
  })
  const jsonMessage = {
    type: 'message',
    content: yourMessage.value,
  }
  //向后台发生消息
  ws.send(JSON.stringify(jsonMessage))
  showFlag.value = 2       
  yourMessage.value = ''
}

//发送图片
const SendSubmit = () => {
  messageList.value.push({
    type: 'message',
    content: fileImageList.value[0],
  })
  console.log(typeof fileImageList.value[0])
  const jsonData = {
    type: 'message',
    content: fileImageList.value[0],
  }
  ws.send(JSON.stringify(jsonData))
  showFlag.value = 3
  fileImageList.value = []
  fileList.value = []
}
console.log(messageList.value)

// 连接处理聊天室
const initWebsocket = () => {
  ws = new WebSocket('ws://localhost:8080/')
  console.log(ws)
  ws.onopen = () => {
    console.log('进入聊天室')
  }
  ws.onmessage = (event) => {
    console.log(event.data)
    console.log(messageList.value.type);
    
    messageList.value.push({
      type: 'server',
      content: event.data,
    })
    console.log(messageList.value);
    
  }
  ws.onerror = (error) => {
    console.error('websocket', error)
  }
}

watch(messageList.value, (newValue, oldValue) => {
  console.log(newValue, oldValue)
  sessionStorage.setItem('HistoryList', JSON.stringify(messageList.value))
})

onMounted(() => {
  userInfo.value.userId = new Date().getTime().toString().slice(8)
  initWebsocket()
  if (sessionStorage.getItem('type')) {
    showFlag.value = sessionStorage.getItem('type')
    messageList.value = JSON.parse(sessionStorage.getItem('HistoryList') || '[]')
    sessionStorage.removeItem('type')
  }
})
</script>
